<template>
    <div class="data-processing-dag-node" @mouseenter="onMainMouseEnter" @mouseleave="onMainMouseLeave" @click="edit">
        <div class="main-area">
            <div class="main-info">
                <!-- <i class="node-logo" :style="{ backgroundImage: `url(${NODE_TYPE_LOGO[type]})` }" /> -->
                <i class="node-logo" :style="{ backgroundImage: `url(${this.node.data.img})` }" />
                <div class="ellipsis-row node-name">{{ name }}</div>
            </div>
            <div class="status-action">
                <i class="status-icon status-icon-success" />
                <i class="status-icon status-icon-error" />
            </div>
        </div>
        <div class="plus-dag">
            <el-icon class="icon" style="background-color: #5F95FF" @click="createDownstream('ADD')">+ </el-icon>
        </div>

        <el-dialog v-model="addNodeVisible" title="添加节点" :append-to-body="true">
            <div>插件名称</div>
            <el-select v-model="searchNode" filterable remote remote-show-suffix reserve-keyword placeholder="插件名称"
                :remote-method="getPlugin" :loading="loading" @change="selectPlugin">
                <el-option v-for="item in searchNodeList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-scrollbar  v-show="pluginIsOpen">
                <div class="plugin-main">
                    <div class="plugin-prompt">
                        <div>指令</div>
                        <el-form-item prop="desc">
                            <el-input v-model="plugin.prompt" type="textarea" />
                        </el-form-item>
                    </div>
                    <div class="model-name">
                        <div>模型</div>
                        <el-form-item>
                            <el-radio-group v-model="sizeForm.model">
                                <el-radio-button label="ChatGLM" name="a" />
                                <el-radio-button label="ChatGPT" name="b" />
                                <el-radio-button label="文心一言" name="c" />
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="temperature">
                        <div class="tips">
                            温度（发散程度）
                        </div>
                        <el-form-item>
                            <el-slider v-model="sizeForm.temperature" :min="0" :max="10" :model-value="3" />
                        </el-form-item>
                    </div>
                    <div class="model-type">
                        <div>类型</div>
                        <el-form-item>
                            <el-radio-group v-model="sizeForm.type">
                                <el-radio-button label="爬虫类" name="type" />
                                <el-radio-button label="编辑器插件" name="type" />
                                <el-radio-button label="大模型类" name="type" />
                                <el-radio-button label="数据处理类" name="type" />
                                <el-radio-button label="发布类" name="type" />
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div class="selftags">
                        <div>自定义标签</div>
                        <el-form-item>
                            <el-input v-model="sizeForm.desc" />
                        </el-form-item>
                    </div>
                    <div class="price">
                        <div>价格</div>
                        <el-form-item>
                            <el-input v-model="sizeForm.desc" />
                        </el-form-item>
                    </div>
                </div>
                <div>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </div>
            </el-scrollbar>
        </el-dialog>
    </div>
</template>
  
<script>
import { emitter } from '@/global.js';
import { ElButton, ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon, ElDialog, ElTable, ElTableColumn, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio, ElScrollbar, ElSlider, ElRadioButton } from 'element-plus'
import { getPlugins, searchPlugins,getPlugin } from '@/api/plugin.js';
export default {
    name: 'Node',
    inject: ['getGraph', 'getNode'],
    components: {
        ElButton,
        ElDropdown,
        ElDropdownItem,
        ElDropdownMenu,
        ElIcon,
        ElDialog,
        ElTable,
        ElTableColumn,
        ElForm,
        ElFormItem,
        ElInput,
        ElSelect,
        ElOption,
        ElRadioGroup,
        ElRadio,
        ElRadioButton,
        ElSlider,
        ElScrollbar,
    },
    data() {
        return {
            type: '',
            status: '',
            name: '',
            node: this.getNode(),
            addNodeVisible: false,
            loading: false,
            searchNode: '',
            searchNodeList: [],
            plugin: {},
            pluginIsOpen: false,
            sizeForm :{
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                model: 'ChatGPT'
            },
            PROCESSING_TYPE_LIST: [
                {
                    type: 'ADD',
                    // name: '数据筛选',
                    name: '添加下游',
                },
                {
                    type: 'FILTER',
                    name: '数据筛选',
                    // name: '添加下游',
                },
                {
                    type: 'JOIN',
                    name: '数据连接',
                },
                {
                    type: 'UNION',
                    name: '数据合并',
                },
                {
                    type: 'AGG',
                    name: '数据聚合',
                },

                {
                    type: 'OUTPUT',
                    name: '数据输出',
                },
            ],

        };
    },
    mounted() {
        const methods = this.$options.methods;
        for (let key in methods) {
            methods[key].bind(this);
        }
        const self = this;

        const Node = this.node
        this.name = Node.data.name;
        this.status = Node.data.status;
        this.type = Node.data.type;

        // 监听数据改变事件
        this.node.on('change:data', ({ current }) => {
            self.name = current.name;
            self.status = current.status;
            self.type = current.type;
        });
    },
    methods: {
        selectPlugin(plugin) {
            console.log('selectItem: ', plugin)
            getPlugin(plugin).then((result)=>{
                this.plugin = result
                this.pluginIsOpen = true
            })
        },
        //获取plugin
        getPlugin(keyWord) {
            this.loading = true
            console.log(keyWord);
            searchPlugins(keyWord).then((result) => {
                this.searchNodeList = result
                this.loading = false
            })
        },
        // 添加下游
        createDownstream(type) {
            console.log('-------------------type:', type);
            this.addNodeVisible = true
            // this.createDownstream
            // $Bus.$Bus.emit('createNode', { type, node: this.node })
        },
        onMainMouseLeave() {
            // 获取该节点下的所有连接桩
            const ports = this.node.getPorts() || []
            ports.forEach((port) => {
                this.node.setPortProp(port.id, 'attrs/circle', {
                    fill: 'transparent',
                    stroke: 'transparent',
                })
            })
        },
        onMainMouseEnter() {
            // 获取该节点下的所有连接桩
            const ports = this.node.getPorts() || []
            ports.forEach((port) => {
                this.node.setPortProp(port.id, 'attrs/circle', {
                    fill: '#fff',
                    stroke: '#85A5FF',
                })
            })
        },
        edit() {
            // console.log('edit:-------------');
            emitter.emit('plugin', this.node)
        }
    }
};
</script>
<style lang="less" scoped>
.main-info {}

.data-processing-dag-node {
    display: flex;
    flex-direction: row;
    align-items: center;
    // justify-content: center;
}

.main-area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    // justify-content: center;
    padding: 12px;
    width: 230px;
    height: 48px;
    color: rgba(0, 0, 0, 65%);
    font-size: 12px;
    font-family: PingFangSC;
    line-height: 24px;
    background-color: #fff;
    box-shadow: 0 -1px 4px 0 rgba(209, 209, 209, 50%), 1px 1px 4px 0 rgba(217, 217, 217, 50%);
    border-radius: 2px;
    border: 1px solid transparent;
}

.main-area:hover {
    border: 1px solid rgba(0, 0, 0, 10%);
    box-shadow: 0 -2px 4px 0 rgba(209, 209, 209, 50%), 2px 2px 4px 0 rgba(217, 217, 217, 50%);
}

.node-logo {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.node-name {
    overflow: hidden;
    display: inline-block;
    width: 120px;
    margin-left: 6px;
    color: rgba(0, 0, 0, 65%);
    font-size: 12px;
    font-family: PingFangSC;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
}

.status-action {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // align-items: center;
}

.status-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    // color: red;
}

.status-icon-error {
    background: url('https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ') no-repeat center center / 100% 100%;
}

.status-icon-success {
    background: url('https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ') no-repeat center center / 100% 100%;
}

.plus-dag {
    visibility: visible;
    position: relative;
    margin-left: 12px;
    height: 48px;
}

.plus-action {
    position: absolute;
    top: calc(50% - 8px);
    left: 0;
    width: 16px;
    height: 16px;
    background: url('https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*ScX2R4ODfokAAAAAAAAAAAAADtOHAQ/original') no-repeat center center / 100% 100%;
    cursor: pointer;
}

.plus-action:hover {
    background-image: url('https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*tRaoS5XhsuQAAAAAAAAAAAAADtOHAQ/original');
}

.plus-action:active,
.plus-action-selected {
    background-image: url('https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*k9cnSaSmlw4AAAAAAAAAAAAADtOHAQ/original');
}

.x6-node-selected .main-area {
    border-color: #3471f9;
}

.x6-node-selected .plus-dag {
    visibility: visible;
}
</style>
  